<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>DNS融合大数据分析系统</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <meta content="" name="description" />
    <meta content="" name="author" />

    <!-- ================== BEGIN BASE CSS STYLE ================== -->
    <link rel="shortcut icon"
          href="assets/img/favorite.ico"/>
    <link href="assets/plugins/jquery-ui-1.10.4/jquery-ui.css" rel="stylesheet" />
    <link href="assets/plugins/bootstrap-3.1.1/css/bootstrap.css" rel="stylesheet" />
    <link href="assets/plugins/font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" />
    <link href="assets/plugins/flexgrid/flexigrid.css" rel="stylesheet" />
    <link href="assets/css/animate.css" rel="stylesheet" />
    <link href="assets/css/style.css" rel="stylesheet" />
    <link href="assets/css/style-responsive.css" rel="stylesheet" />
    <!-- ================== END PAGE LEVEL STYLE ================== -->
    <style>
        .flexigrid{
            width: 100%;

        }
        .flexigrid .gBlock{
            height: 100%;
        }
    </style>
</head>
<body>
<!-- begin #page-loader -->
<div id="page-loader" class="fade in"><span class="spinner"></span></div>
<!-- end #page-loader -->

<!-- begin #page-container -->
<div id="page-container" class="fade">
    <!-- begin #header -->
    <div id="header" class="header navbar navbar-default navbar-fixed-top">
        <!-- begin container-fluid -->
        <div class="container-fluid">
            <!-- begin mobile sidebar expand / collapse button -->
            <div class="navbar-header">
                <a href="index.html"
                   class="navbar-brand"><img
                        src="assets/img/logo.png"
                        class="navbar-logo"/>
                    DNS融合大数据分析系统</a>
                <button type="button"
                        class="navbar-toggle"
                        data-click="sidebar-toggled">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <!-- end mobile sidebar expand / collapse button -->

            <!-- begin header navigation right -->
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <form class="navbar-form full-width">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Enter keyword" />
                            <button type="submit" class="btn btn-search"><i class="fa fa-search"></i></button>
                        </div>
                    </form>
                </li>
                <li class="dropdown">
                    <a href="javascript:;" data-toggle="dropdown" class="dropdown-toggle f-s-14">
                        <i class="fa fa-bell-o"></i>
                        <span class="label">5</span>
                    </a>
                    <ul class="dropdown-menu media-list pull-right animated fadeInDown">
                        <li class="dropdown-header">Notifications (5)</li>
                        <li class="media">
                            <a href="javascript:;">
                                <div class="pull-left media-object bg-red"><i class="fa fa-bug"></i></div>
                                <div class="media-body">
                                    <h6 class="media-heading">Server Error Reports</h6>
                                    <div class="text-muted">3 minutes ago</div>
                                </div>
                            </a>
                        </li>
                        <li class="media">
                            <a href="javascript:;">
                                <div class="pull-left"><img src="assets/img/user-1.jpg" class="media-object" alt="" /></div>
                                <div class="media-body">
                                    <h6 class="media-heading">John Smith</h6>
                                    <p>Quisque pulvinar tellus sit amet sem scelerisque tincidunt.</p>
                                    <div class="text-muted">25 minutes ago</div>
                                </div>
                            </a>
                        </li>
                        <li class="media">
                            <a href="javascript:;">
                                <div class="pull-left"><img src="assets/img/user-2.jpg" class="media-object" alt="" /></div>
                                <div class="media-body">
                                    <h6 class="media-heading">Olivia</h6>
                                    <p>Quisque pulvinar tellus sit amet sem scelerisque tincidunt.</p>
                                    <div class="text-muted">35 minutes ago</div>
                                </div>
                            </a>
                        </li>
                        <li class="media">
                            <a href="javascript:;">
                                <div class="pull-left media-object bg-green"><i class="fa fa-plus"></i></div>
                                <div class="media-body">
                                    <h6 class="media-heading"> New User Registered</h6>
                                    <div class="text-muted">1 hour ago</div>
                                </div>
                            </a>
                        </li>
                        <li class="media">
                            <a href="javascript:;">
                                <div class="pull-left media-object bg-blue"><i class="fa fa-envelope"></i></div>
                                <div class="media-body">
                                    <h6 class="media-heading"> New Email From John</h6>
                                    <div class="text-muted">2 hour ago</div>
                                </div>
                            </a>
                        </li>
                        <li class="dropdown-footer text-center">
                            <a href="javascript:;">View more</a>
                        </li>
                    </ul>
                </li>
                <li class="dropdown navbar-user">
                    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
                        <img src="assets/img/user-11.jpg" alt="" />
                        <span class="hidden-xs">Admin</span> <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu animated fadeInLeft">
                        <li class="arrow"></li>
                        <li><a href="javascript:;">Edit Profile</a></li>
                        <li><a href="javascript:;"><span class="badge badge-danger pull-right">2</span> Inbox</a></li>
                        <li><a href="javascript:;">Calendar</a></li>
                        <li><a href="javascript:;">Setting</a></li>
                        <li class="divider"></li>
                        <li><a href="javascript:;">Log Out</a></li>
                    </ul>
                </li>
            </ul>
            <!-- end header navigation right -->
        </div>
        <!-- end container-fluid -->
    </div>
    <!-- end #header -->

    <!-- begin #sidebar -->
    <div id="sidebar" class="sidebar">
        <!-- begin sidebar scrollbar -->
        <div data-scrollbar="true" data-height="100%">
            <!-- begin sidebar user -->
            <ul class="nav">
                <li class="nav-profile">
                    <div class="image">
                        <a href="javascript:;"><img src="assets/img/user-11.jpg" alt="" /></a>
                    </div>
                    <div class="info">
                        Admin
                        <small>管理员</small>
                    </div>
                </li>
            </ul>
            <!-- end sidebar user -->
            <!-- begin sidebar nav -->
            <ul class="nav" id="navigation">

            </ul>
            <!-- end sidebar nav -->
        </div>
        <!-- end sidebar scrollbar -->
    </div>
    <!-- end #sidebar -->
    <!-- begin #content -->
    <div id="content" class="contentGrid">
        <!-- begin row -->
        <div class="row" style="margin-left: -10px;margin-right: -10px;">
            <!-- begin col-12 -->
            <div class="col-md-12">
                <!-- begin panel -->
                <div class="panel panel-inverse" style="margin-bottom: 0;">
                    <div class="panel-heading">
                        <ol class="breadcrumb pull-right" id="breadcrumb">
                        </ol>
                        <h4 class="panel-title">预定义域名</h4>
                    </div>
                    <div class="panelbody" >
                        <table id="flex1" style="display:none;width: 100%;height: 100%;"></table>
                    </div>
                </div>
                <!-- end panel -->
            </div>
            <!-- end col-12 -->
        </div>
        <!-- end row -->
    </div>
    <!-- end #content -->

    <!-- begin scroll to top btn -->
    <a href="javascript:;" class="btn btn-icon btn-circle btn-success btn-scroll-to-top fade" data-click="scroll-top"><i class="fa fa-angle-up"></i></a>
    <!-- end scroll to top btn -->
</div>
<!-- end page container -->

<!-- ================== BEGIN BASE JS ================== -->
<script src="assets/plugins/jquery-1.7.2/jquery-1.7.2.js"></script>
<script src="assets/plugins/jquery-ui-1.10.4/ui/minified/jquery-ui.min.js"></script>
<script src="assets/plugins/bootstrap-3.1.1/js/bootstrap.min.js"></script>
<script src="assets/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script type="text/javascript" src="assets/plugins/flexgrid/flexigrid.js"></script>
<!--[if lt IE 9]>
<script src="assets/crossbrowserjs/html5shiv.js"></script>
<script src="assets/crossbrowserjs/respond.min.js"></script>
<script src="assets/crossbrowserjs/excanvas.min.js"></script>
<![endif]-->

<!-- ================== END BASE JS ================== -->

<!-- ================== BEGIN PAGE LEVEL JS ================== -->
<script src="assets/js/apps.js"></script>
<script src="assets/js/nav.js" type="text/javascript"></script>
<script src="assets/js/common.js" type="text/javascript"></script>
<!-- ================== END PAGE LEVEL JS ================== -->
<script>
    $(document).ready(function() {
        App.init();
    });
</script>
<script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
                (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-53034621-1', 'sean-theme.com');
    ga('send', 'pageview');

    $(document).ready(function () {

        $("#flex1").flexigrid({
            url: 'json/predefinedomain.json',
            dataType: 'json',
            colModel : [
                {display: '域名', name : 'DNAME', width : 280, sortable : true, align: 'center'},
                {display: '业务名称', name : 'SRVNAME', width : 180, sortable : true, align: 'center'},
                {display: '分组类型', name : 'GROUPTYPE', width : 180, sortable : true, align: 'center'},
                {display: 'DNS查询数', name : 'REQS', width : 180, sortable : true, align: 'center'},
                {display: '出网次数', name : 'OUTS', width : 180,sortable : true, align: 'center'},
                {display: '网内次数', name : 'INS', width : 180,sortable : true, align: 'center'},
                {display: '错误次数', name : 'ERRCNT', width : 180,sortable : true, align: 'center'},
                {display: '直连引入次数', name : 'DIRECTIN', width : 180,sortable : true, align: 'center'},
                {display: '铁通引入次数', name : 'CTTIN', width : 180,sortable : true, align: 'center'},
                {display: '移动引入', name : 'CMCCIN', width : 180,sortable : true, align: 'center'},
                {display: '本省移动', name : 'SELFCMCC', width : 180,sortable : true, align: 'center'},
                {display: '外省移动', name : 'FCMCC', width : 180,sortable : true, align: 'center'},
                {display: 'IDC', name : 'IDC', width : 180,sortable : true, align: 'center'},
                {display: 'CACHE', name : 'CACHE', width : 180,sortable : true, align: 'center'},
                {display: 'CDN', name : 'CDN', width : 180,sortable : true, align: 'center'},
                {display: '占请求比例', name : 'DNSREQRATE', width : 180,sortable : true, align: 'center'},
                {display: '出网影响度', name : 'OUTRATE', width : 180,sortable : true, align: 'center'},
                {display: '备案', name : 'ICP', width : 180,sortable : true, align: 'center'},
                {display: '属性', name : 'IMPORTTYPE', width : 180,sortable : true, align: 'center'},
                {display: 'TCP开放端口', name : 'TCP', width : 180,sortable : true, align: 'center'},
                {display: '服务类型', name : 'SRVTYPE', width : 180,sortable : true, align: 'center'},
                {display: '缓存属性', name : 'CACHEATTR', width : 180,sortable : true, align: 'center'},
                {display: '本网率', name : 'IMPORTRATE', width : 180,sortable : true, align: 'center'},
                {display: '本省率', name : 'SELFRATE', width : 180,sortable : true, align: 'center'},
                {display: '国外', name : 'ABROAD', width : 180,sortable : true, align: 'center'},
                {display: '中国电信', name : 'CT', width : 180,sortable : true, align: 'center'},
                {display: '中国联通', name : 'CU', width : 180,sortable : true, align: 'center'},
                {display: '港澳台', name : 'GAT', width : 180,sortable : true, align: 'center'}
            ],
            buttons : [
                {name: '查询', bclass: 'search', onpress : opreateAdv},
                {name: '导出结果集', bclass: 'modify', onpress : opreateAdv}
            ],
            usepager: true,
            useRp: true,
            resizable: false,
            singleSelect: true,
            rp: 20,
            procmsg: '请等待数据正在加载中…',
            nomsg: '没有数据',
            onError: '查询出错请刷新',
            showTableToggleBtn: true,
            width: "100%",
            onSubmit: addFormData,
            height: $(window).height()-185,
            preProcess: preProcessData
        });
    });

    function preProcessData(data) {
        console.log(data);
        return data;
    }

    function opreateAdv() {

    }

    function addFormData(){
        //passing a form object to serializeArray will get the valid data from all the objects, but, if the you pass a non-form object, you have to specify the input elements that the data will come from
        var dt = $('#sform').serializeArray();
        $("#flex1").flexOptions({params: dt});
        return true;
    }
</script>
</body>
</html>
